<template>
  <div class="caseInfo">
    <mu-appbar :z-depth="0" style="width: 100%;top: 0" color="white" text-color="primary">
      <mu-button icon slot="left">
        <div class="headerBack">
          <mu-button flat class="backBarClass mu-ripple-wrapper" to="home">
            <mu-icon size="36" value="chevron_left" left></mu-icon>
          </mu-button>
        </div>
      </mu-button>
      <mu-button icon slot="right" @click="openFullScreenDialog">
        <mu-icon value="share"></mu-icon>
      </mu-button>
    </mu-appbar>
    <mu-container>
      <mu-card style="width: 100%; max-width: 375px;height: 100%; margin: 0 auto;">
        <mu-card-header :title="fhCase.modelName" :sub-title="fhCase.modelCode">
          <mu-avatar slot="avatar" color="blueGrey200">
            M
          </mu-avatar>
        </mu-card-header>
        <mu-card-media>
          <img :src="fhCase.qrUrl">
        </mu-card-media>
        <mu-card-title title="详细介绍"></mu-card-title>
        <mu-card-text>
          <div v-html="fhCase.modelDescribe"></div>
        </mu-card-text>
      </mu-card>
    </mu-container>
    <mu-container class="button-wrapper">
      <mu-flex justify-content="center" align-items="center">
        <mu-button round full-width color="primary" @click="join">加入申报</mu-button>
      </mu-flex>
    </mu-container>
    <mu-dialog width="150%" overlay-color="black" :overlay-opacity="0.9" scrollable11
               :open.sync="openFullScreen">
      <mu-container id="screen_subject" ref="container">
        <mu-paper :z-depth="2">
          <mu-card style="width: 100%; margin: 0 auto;">
            <mu-card-media>
              <img :src="shareQrCode">
            </mu-card-media>
            <mu-card-title style="text-align: center;margin-top:-2rem" sub-title="长按识别或保存二维码"></mu-card-title>
          </mu-card>
        </mu-paper>
      </mu-container>
    </mu-dialog>
  </div>
</template>

<script>
  import headerBack from '@/components/headerBack';

  export default {
    name: 'caseInfo',
    data() {
      return {
        token: '',
        screenUrl: "",
        openFullScreen: false,
        protocol: {
          id: '',
          title: '申报说明',
          content: this.PROTOCOL_CONTENT
        },
        openAlert: false,
        open: false,
        depth: 0,
        panel: '',
        active1: 0,
        type: '',
        declareFlag: true,
        fhCase: {},
        company: {},
        organization: {},
        bank: {},
        fhFiles: [],
        openLink: false,
        openFile: false,
        shareQrCode: 'https://m.wwei.cn/imgcdn/images/2018/10/10/3CaJ4TDDPhxQRPy.jpg',
        hasCollect: false
      }
    },
    methods: {
      getProtocol() {
        const _self = this;
        let params = {
          id: this.$route.query.id
        };
        this.postRequest("/protocol/getProtocol", params).then(res => {
          if (res.code === 200 && res.data) {
            _self.protocol = res.data;
          }
        });
      },
      goDeclare() {
        this.$router.push({name: 'declare', query: {caseId: this.fhCase.id}});
      },
      closeAlertDialog() {
        this.openAlert = false;
      },
      closeBottomSheet() {
        this.open = false;
      },
      getData() {
        const _self = this;
        this.postRequest("/model/info?id=" + this.$route.query.id).then(res => {
          if (res.code === 200) {
            _self.fhCase = res.data;
          }
        });
      },
      toggle(panel) {
        this.panel = panel === this.panel ? '' : panel;
      },
      join() {
        this.$router.push({name: 'declare', query: {caseId: this.fhCase.id}});
      },
      openLinkDialog() {
        if (this.info.linkInfo !== null && this.info.linkInfo !== '') {
          window.open(this.info.linkInfo);
        } else {
          this.$toast.error('无相关链接');
        }
      },
      openFileDialog() {
        this.openFile = true;
      },
      openUrl(url) {
        window.open(url);
      },
      openFullScreenDialog() {
        this.shareQrCode = this.fhCase.qrUrl;
        this.openFullScreen = true;
      },
      closeFullScreenDialog() {
        this.openFullScreen = false;
      },
      getCollectStatus() {
        if (this.token) {
          let param = {
            id: this.$route.query.id
          };
          let _this = this;
          this.postRequest("/user/isCollect", param).then(res => {
            if (res.code === 200) {
              _this.hasCollect = res.data;
            }
          })
        }
      },
      collect() {
        if (this.token) {
          let params = {
            ids: [this.$route.query.id]
          };
          let _this = this;
          this.postRequest("/user/collect", params).then(res => {
            if (res.code === 200) {
              _this.hasCollect = true;
            }
          });
        } else {
          this.open = true;
        }
      },
      cancel() {
        let params = {
          ids: [this.$route.query.id]
        };
        let _this = this;
        this.postRequest("/user/cancelCollect", params).then(res => {
          if (res.code === 200) {
            _this.hasCollect = false;
          }
        });
      },
      visit() {
        this.postRequest("/referral/visit").then(res => {
        });
      }
    },
    mounted() {
      this.getData();
    },
    created() {
      this.token = this.getStore("accessToken");
      let declareToken = this.$route.query.declare;
      if (declareToken) {
        this.setStore("declareToken", declareToken);
      }
    },
    components: {
      headerBack
    }
  }
</script>

<style scoped lang="scss">
  .caseInfo {
    position: fixed;
    top: 0;
    width: 100%;
    /*margin-bottom: 3rem;*/
    /*overflow: auto;*/
    height: 100%;
    background-color: #f9f9f9;
    z-index: 9999;
  }

  .title {
    width: 100%;
    color: #ffffff;
    font-size: 15px;
  }

  .appbar {
    padding: 0;
    width: 100%;
    text-align: center;
    position: fixed;
  }

  .flex-title {
    width: 100%;
    height: 100%;
  }

  .flex-content {
    width: 100%;
    height: 300px;
    line-height: 100%;
    overflow: scroll;
  }

  .flex-bottom {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100%;
  }

  .pic {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
  }

  .portrait {
    position: absolute;
    top: 100px;
    left: 12%;
    background-color: #c62828;
    height: 100px;
    width: 100px;
    /*border-radius: 100%;*/
  }

  .name {
    color: white;
    font-size: 13px;
    top: 90px;
    left: 36%;
    position: absolute;
    line-height: 30px;
    padding: 5px;
  }

  .icon {
    top: 85%;
    left: 35%;
  }

  .span-identity-0 {
    background-color: #c62828;
    border-width: 3px;
    font-size: 10px;
    border-radius: 4px;
    color: #ffffff;
  }

  .articleFooterBtn {
    margin: 0 10%;

    span {
      height: 3.6rem;
      line-height: 3.6rem;
      text-align: center;
      font-size: 1.6rem;
    }
  }

  .backBarClass {
    width: 5rem;
  }

  .demo-text {
    padding: 16px;
    background: #fff;

    p {
      margin: 8px 0;
    }
  }

  .item-title {
    width: 35%;
  }

  .item-content {
    width: 100%;
  }

  .grid-cell {
    margin-top: 5px;
    border-radius: 6px;
    background: #f2f2f2;
  }

  .pic {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
  }

  .button-wrapper {
    position: fixed;
    text-align: center;
    bottom: 0;

    .mu-button {
      margin: 4px;
      vertical-align: middle;
    }

    a.mu-button {
      text-decoration: none;
    }
  }

  .img {
    max-height: 200px;
    width: 100%;
    border-radius: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
  }
</style>
